<style>
    .check{
        font-size: 18px;
        margin-bottom: 5px;
        margin-left: 5px;
    }
    .boder{
        border: #9F9F9F solid 1px;
    }
    .member{
        height: 180px;
        background-color: #bce8f1;
        overflow:auto
    }
</style>
<div class="layui-container" style="width: 650px">
    <div class="layui-row" style="font-size: 40px;text-align: center;">
        <span id="groupName">xx小组</span>
    </div>
    <div class="layui-row layui-col-space10" style="height: 240px">
        <div class="layui-col-md5">
            <div class="layui-row" style="font-size: 20px;text-align: center;">未分配小组成员</div>
            <div class="layui-row boder member" id="NoGroupMember">

            </div>
        </div>
        <div class="layui-col-md2" >
            <div class="layui-row boder" style=" margin-top: 80px;margin-bottom: 10px;cursor: pointer" id="addMember"> &gt;&gt;添加组员&gt;&gt;</div>
            <div class="layui-row boder" id="removeMember" style="cursor: pointer"> &lt;&lt;移除组员&lt;&lt;</div>
        </div>
        <div class="layui-col-md5">
            <div class="layui-row" style="font-size: 20px;text-align: center;">小组成员</div>
            <div class="layui-row boder member" id="GroupMember">

            </div>
        </div>

    </div>
    <div class="layui-form-item model-form-footer">
        <button class="layui-btn" id="save" ew-event="closeDialog" lay-filter="group-form-submit">保存</button>
    </div>
</div>

<script>
    layui.use(['layer','index', 'table','admin', 'form', 'formSelects'], function () {

        var layer = layui.layer;
        var admin = layui.admin;
        var form = layui.form;
        var formSelects = layui.formSelects;
        var index = layui.index;
        var table = layui.table;

        //回显小组数据
        var group = admin.getTempData('groupData');
        console.log(group)

        $("#groupName").html(group.gpname)

        function checkGroup() {
            admin.req("api-user/group/getCheckGroupMember",{
                id:group.grouid
            },function (data){
                console.log(data)
                setGroupMember(data.data.groupMember);
                setNoGroupMember(data.data.noGroupMember);
            },"GET")
        }

        checkGroup();

        function setGroupMember(data){
            html = "";
            if (data.length == 0){
                $("#GroupMember").html(html);
            }
            for (let i = 0; i < data.length; i++) {
                html += "<div class='layui-row check'><label>\n" +
                    "<input name='groupMember' type='checkbox' value='" + data[i].id + "'/>\n" +
                    "<span>" + data[i].nickname + "</span></label></div>";
            }
            $("#GroupMember").html(html);
        }
        function setNoGroupMember(data){
            html = "";
            if (data.length == 0){
                $("#NoGroupMember").html(html);
            }
            for (let i = 0; i < data.length; i++) {
                html += "<div class='layui-row check'><label>\n" +
                    "<input name='noGroupMember' type='checkbox' value='" + data[i].id + "'/>\n" +
                    "<span>" + data[i].nickname + "</span></label></div>";
            }
            $("#NoGroupMember").html(html);
        }

        $("#addMember").click(function(){
            let checkNumber = parseInt($("input[name='noGroupMember']:checked").length); //选中的数量
            if (checkNumber ==0){
                return
            }
            let ids = getAddCheck("noGroupMember");
            console.log(ids)
            admin.req("api-user/group/addGroupMember",{
                ids:ids
                ,grouid:group.grouid
            },function (data){
                checkGroup();
            },"GET")
        })

        $("#removeMember").click(function(){
            let checkNumber = parseInt($("input[name='groupMember']:checked").length); //选中的数量
            if (checkNumber ==0){
                return
            }
            let ids = getAddCheck("groupMember");
            admin.req("api-user/group/removeGroupMember",{
                ids:ids
                ,grouid:group.grouid
            },function (data){
                checkGroup();
            },"GET")
        })

        function getAddCheck(name) {
            let hb = [];
            $("[name = "+name+"]:checkbox").each(function(i){
                if ($(this).prop("checked") == true){
                    hb.push($(this).val());
                }
            })
            hb = JSON.stringify(hb);
            hb = hb.replace("[","").replace("]","");
            hb = hb.replaceAll("\"","")
            return hb;
        }

        $("#save").click(function (){
            admin.finishPopupCenter();
        })

    });
</script>
